<template>
  <div class="container">
    <div class="pic">
      <img src="../../assets/images/Messageinteraction.png" alt="">
    </div>
    <vue-baberrage
      :isShow="barrageIsShow"
      :barrageList="barrageList"
      :maxWordCount="maxWordCount"
      :throttleGap="throttleGap"
      :loop="barrageLoop"
      :boxHeight="boxHeight"
      :messageHeight="messageHeight"
      :lanesCount="lanesCount"
    >
    </vue-baberrage>
  </div>
</template>

<script>
import { MESSAGE_TYPE } from "vue-baberrage";
export default {
  data() {
    return {
      msg: "马优晨就是个辣鸡马优晨就是个辣鸡~",
      barrageIsShow: true,
      messageHeight: 150,
      boxHeight: 150,
      barrageLoop: true,
      maxWordCount: 3,
      throttleGap: 5000,
      barrageList: [],
      lanesCount: 4
    };
  },
  mounted() {
    this.addToList();
    // 定时器定期刷新数据
  },
  methods: {
    addToList() {
      let list = [
        {
          id: 1,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: this.msg,
          time: 13,
          barrageStyle: "red"
        },
        {
          id: 2,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: this.msg,
          time: 8,
          barrageStyle: "green"
        },
        {
          id: 13,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: this.msg,
          time: 10,
          barrageStyle: "normal"
        },
        {
          id: 4,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: this.msg,
          time: 15,
          barrageStyle: "blue"
        },
        {
          id: 5,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: this.msg,
          time: 16,
          barrageStyle: "red"
        },
        {
          id: 6,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: this.msg,
          time: 12,
          barrageStyle: "normal"
        },
        {
          id: 7,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: this.msg,
          time: 15,
          barrageStyle: "red"
        },
        {
          id: 8,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: this.msg,
          time: 15,
          barrageStyle: "normal"
        },
        {
          id: 9,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: this.msg,
          time: 8,
          barrageStyle: "red"
        },
        {
          id: 10,
          avatar:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg",
          msg: this.msg,
          time: 10,
          barrageStyle: "yellow"
        }
      ];
      list.forEach(v => {
        this.barrageList.push({
          id: v.id,
          avatar: v.avatar,
          msg: v.msg,
          time: v.time,
          type: MESSAGE_TYPE.NORMAL,
          barrageStyle: v.barrageStyle
        });
      });
    }
  }
};
</script>
<style lang="scss">
.container {
  width: 100%;
  background: url("../../assets/images/MessageBGI.png");
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
}
.pic{
  padding: 20px 30px;
}
.baberrage-avatar{
width: 30px!important;
height: 30px!important;
img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
}
.baberrage-item .normal {
  background-color: #fbbebe !important;
  box-shadow: 0px 1px 3px 0px rgba(73, 51, 48, 0.3) !important;
  font-size: 25px;
}
.blue {
  .normal {
    background: #e6ff75 !important;
  }
}
.green {
  .normal {
    background: #75ffcd !important;
  }
}
.red {
  .normal {
    background: #e68fba !important;
  }
}
.yellow {
  .normal {
    background: #dfc795 !important;
  }
}

.baberrage-stage {
  position: absolute;
  width: 100%;
  height: 212px;
  overflow: hidden;
  top: 30px;
  margin-top: 130px;
}
</style>
